<template>
    <div class="bigBox" v-show="!showDetail">
        <div class="body">
            <div class="imgs">
                <ImgList :imgList="imgList" @viewPicture="viewPicture"></ImgList>
                <Loading v-show="loading"></Loading>
            </div>
        </div>
        <el-pagination size="small" background layout="prev, pager, next" :page-size="size" :total="total"
            class="pagination" @change="changePage" />
    </div>
    <Detail v-if="showDetail" @closePicture="closePicture" :urls="imgList" :index="index">
    </Detail>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { getBingImgs } from '@renderer/api/mohu'
import ImgList from '@renderer/components/imgList.vue'
import Detail from '@renderer/components/detail.vue'
import Loading from '@renderer/components/loading.vue'
const AllImgList = ref<any>([])
const loading = ref(false)
const page = ref(1)
const size = ref(20)
const imgList: any = ref([])
const index = ref(0)
const showDetail = ref(false)
const total = ref(0)

const getNetImgList = () => {
    imgList.value = []
    setTimeout(() => {
        imgList.value = AllImgList.value.slice((page.value - 1) * size.value, page.value * size.value)
    }, 200)
    loading.value = true
    loading.value = false
}
const getAllList = async () => {
    const res = await getBingImgs()
    res.data.forEach((item: any) => {
        const str: string = item.enddate
        const year = str.slice(0, 4)
        const month = str.slice(4, 6)
        const day = str.slice(6, 8)
        const date = "(" + year + '-' + month + '-' + day + ")"
        const obj = {
            title: item.title + date,
            src: 'https://bing.com/' + item.url,
            source: 'https://bing.com/' + item.url
        }
        AllImgList.value.push(obj)
    })
    total.value = res.Total
    getNetImgList()
}

const viewPicture = (num: number) => {
    index.value = num
    showDetail.value = true
}
const closePicture = () => {
    showDetail.value = false
}
const changePage = (num: number) => {
    page.value = num
    getNetImgList()
}

onMounted(() => {
    getAllList()
})
onBeforeUnmount(() => {

})
</script>

<style scoped lang="scss">
.bigBox {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;

    .body {
        width: 100%;
        height: 100vh;
        display: grid;


        .imgs {
            overflow-y: auto;
            @include mixin.scroll_bar();
        }
    }

    .pagination {
        position: absolute;
        bottom: 10px;
        right: 20px;
        z-index: 1000;
    }
}
</style>